<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3实现照片墙效果</title>
        <style type="text/css">
            h1{
                text-align: center;
                color: #fff;
            }
            body{
                background: #ccc;
            }
            /*定义容器大小*/
            .container{
                width: 960px;
                height: 480px;
                margin: 60px auto;/*居中*/
                position: relative;
            }
            .container img{
                position: absolute;
                width: 320px;
                height: 240px;
                padding: 10px 10px 20px;
                background: #f5f5f5;
                border: 1px solid #fff;
                -webkit-transition:1.5s;
                -moz-transition:1.5s;
                transition:1.5s;
            }
            .container img:hover{
                -webkit-transform:rotate(0deg);
                -moz-transform:rotate(0deg);
                transform:rotate(0deg);
                -webkit-transition:scale(1);
                -moz-transition:scale(1);
                transition:scale(1);
                box-shadow: 10px 10px 15px #999;
                z-index: 1;
            }
            .style1{
                top: 0px;
                left:-80px;
                -webkit-transform:rotate(-10deg);
                -moz-transform:rotate(-10deg);
                transform:rotate(-10deg);
            }
            .style2{
                top: 10px;
                left:80px;
                -webkit-transform:rotate(20deg);
                -moz-transform:rotate(20deg);
                transform:rotate(20deg);
            }
            .style3{
                top: 23px;
                left:300px;
                -webkit-transform:rotate(10deg);
                -moz-transform:rotate(10deg);
                transform:rotate(10deg);
            }
            .style4{
                top: 20px;
                left:600px;
                -webkit-transform:rotate(-40deg);
                -moz-transform:rotate(-40deg);
                transform:rotate(-40deg);
            }
            .style5{
                top: 300px;
                left:680px;
                -webkit-transform:rotate(10deg);
                -moz-transform:rotate(10deg);
                transform:rotate(10deg);
            }
            .style6{
                top: 300px;
                left:450px;
                -webkit-transform:rotate(40deg);
                -moz-transform:rotate(40deg);
                transform:rotate(40deg);
            }
            .style7{
                top: 300px;
                left:100px;
                -webkit-transform:rotate(-200deg);
                -moz-transform:rotate(-20deg);
                transform:rotate(-20deg);
            }
            .style8{
                top: 300px;
                left:-180px;
                -webkit-transform:rotate(13deg);
                -moz-transform:rotate(13deg);
                transform:rotate(13deg);
            }
        </style>
    </head>
    <body>
        <h1>照片墙</h1>
        <div class="container">
            <img class="style1" src="img/BaiYi_logo.png"/>
            <img class="style2" src="img/lemonce.jpg"/>
            <img class="style3" src="img/lemonce03%E5%A4%A7%E9%9B%86%E5%90%88%E7%89%88%E6%9C%AC.png" />
            <img class="style4" src="img/lemonce_bg.jpg" />
            <img class="style5" src="img/lgh.png" />
            <img class="style6" src="img/lyy_%E9%85%B7%E9%85%B7.png">
            <img class="style7" src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png"/>
            <img class="style8" src="img/testweb_iocn.jpg.png" />
        </div>
    </body>
</html>